<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
>
<head>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody  layui-center">
<form class="layui-form layui-form-pane" lay-filter="warnRule">
    <div class="layui-form-item top">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">设备类型:</label>
            <div class="layui-input-inline">
                <input type="text" id="tree" name="deviceType" lay-filter="tree" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item top">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">告警参数:</label>
            <div class="layui-input-inline">
                <select id="paramsId" name="paramsId">
                    <option value="" selected>请选择</option>
                </select>
                <!--<input type="text" name="paramsId" id="paramsId" class="layui-input" maxlength="20"
                       lay-verify="required" lay-reqtext="请输入告警参数" placeholder="告警参数" autocomplete="off">-->
            </div>
        </div>
    </div>
    <div class="layui-form-item top">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">持续时间:</label>
            <div class="layui-input-inline">
                <input type="hidden" name="id"/>
                <input type="text" name="duration" id="duration" class="layui-input" maxlength="20"
                       lay-verify="required" lay-reqtext="请输入持续时间" placeholder="持续时间" autocomplete="off">
            </div>
        </div>
    </div>
    <div class="layui-form-item top">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">最小值:</label>
            <div class="layui-input-inline">
                <input type="hidden" name="id"/>
                <input type="text" name="minValue" id="minValue" class="layui-input" maxlength="20"
                       lay-verify="required" lay-reqtext="请输入最小值" placeholder="最小值" autocomplete="off">
            </div>
        </div>
    </div>
    <div class="layui-form-item top">
        <div class="layui-inline">
            <label class="layui-form-label myRequired">最大值:</label>
            <div class="layui-input-inline">
                <input type="hidden" name="id"/>
                <input type="text" name="maxValue" id="maxValue" class="layui-input" maxlength="20"
                       lay-verify="required" lay-reqtext="请输最大值" placeholder="最大值" autocomplete="off">
            </div>
        </div>
    </div>
    <div class="layui-form-item top">
        <div class="layui-inline">
            <label class="layui-form-label">是否启用:</label>
            <div class="layui-input-inline">
                <input type="radio" name="valid" title="是" value="true" checked>
                <input type="radio" name="valid" title="否" value="false">
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-center">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="saveType" id="saveType">保存</button>
            <button type="button" class="layui-btn layui-btn-normal" onclick="colsePanl()">取消</button>
            <input type="hidden" name="id" id="id" class="layui-input"/>
        </div>
    </div>
</form>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
</body>
<script>
    layui.config({
        base: "/js/modules/"
    }).extend({
        "treeSelect": "treeSelect"
    });
    layui.use(['form', 'laydate', 'jquery', 'common', 'treeSelect'], function () {
            form = layui.form,
            common = layui.common,
            layer = layui.layer,
            treeSelect = layui.treeSelect,
            $ = layui.$;
        let selectVal = 0;//
        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '/device/type/tree',
            // data: '/data/data3.json',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '选择设备类型',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                selectVal = d.current.id;
                // 查询设备参数
                getDataTypeBytypeId(selectVal);

            },
            // 加载完成后的回调函数
            success: function (d) {
            }
        });
        form.on('submit(saveType)', function (data) {
            data.field.deviceType = selectVal;
            console.log(data.field);
            $.ajax({
                url: '/warn/add',
                type: 'post',
                data: data.field,
                dataType: 'json',
                success: function (result) {
                    if (result.success == true) {
                        parent.layer.alert(result.message);
                        parent.layer.closeAll();
                        parent.location.reload();
                    } else {
                        parent.layer.alert(result.message, {icon: 5});
                    }
                }

            });
            return false;
        });
    });
    //取消按钮
    function colsePanl() {
        parent.layui.layer.closeAll();
    }
    function getDataTypeBytypeId(selectVal) {
        $.ajax({
            url: '/device/type/getTypeDataListByTypeId?typeId=' + selectVal,
            type: 'get',
            success: function (result) {
                let html = '<option value="" selected>请选择</option>';
                if(result.data == null || result.data == undefined){
                }else {
                    for (let i = 0; i < result.data.length; i++) {
                        const dataId = result.data[i].id;
                        const dataName = result.data[i].name;
                        html += '<option value=' + dataId +'>' + dataName + '</option>';
                    }
                }
                $("#paramsId").html(html);
                form.render('select')
            }

        });
    }
</script>
</html>
